<template>
  <a-modal
    :width="500"
    :visible="visible"
    title="字幕设置"
    @cancel="handleClose"
    :bodyStyle="{
      padding: '0px 20px',
      'padding-bottom': '20px',
    }"
    centered
  >
    <div class="form_con">
      <div class="form_item" style="margin-top: 20px">
        <div class="form_title">字体</div>
        <a-select
          @change="handleSelectChange"
          v-model:value="operateForm.material_url"
          style="width: 150px; margin-left: 20px"
          placeholder="请选择字体"
          :options="typefaceOptions"
        ></a-select>
        <a-select
          v-model:value="operateForm.font_size"
          style="width: 150px; margin-left: 10px"
          placeholder="请选择字体大小"
          :options="fontsizeOptions"
        ></a-select>
      </div>

      <div class="form_item" style="justify-content: flex-start">
        <div class="form_title">左右对齐</div>
        <div class="align_type">
          <div
            class="type_item"
            @click="chooseAlignType(item.value, card_index)"
            :class="operateForm.align_type == item.value ? 'active' : ''"
            v-for="(item, index) in alignType"
            :key="index"
          >
            <a-tooltip>
              <template #title>{{ item.name }}</template>
              <component :is="item.icon" />
            </a-tooltip>
          </div>
        </div>

        <div class="form_title" style="margin-left: 10px">上下对齐</div>
        <div class="align_type">
          <div
            class="type_item"
            @click="chooseVerticleType(item.value, card_index)"
            :class="operateForm.verticle_position == item.value ? 'active' : ''"
            v-for="(item, index) in verticleType"
            :key="index"
          >
            <a-tooltip>
              <template #title>{{ item.name }}</template>
              <component :is="item.icon" />
            </a-tooltip>
          </div>
        </div>
      </div>
      <div
        class="form_item"
        style="margin: 15px 0; justify-content: flex-start"
      >
        <div class="form_title">文字颜色</div>
        <color-picker
          v-model:hex="operateForm.color"
          :show-opacity="false"
          :btn-style="{
            width: '94px',
            height: '32px',
            marginLeft: '20px',
          }"
        />
        <div class="form_title">背景色</div>
        <color-picker
          v-model:hex="operateForm.backgroundColor"
          :show-opacity="false"
          :btn-style="{
            width: '94px',
            height: '32px',
            marginLeft: '10px',
          }"
        />
        <a-button
          v-show="operateForm.backgroundColor"
          type="link"
          @click="operateForm.backgroundColor = ''"
          >清除背景色</a-button
        >
      </div>

      <div class="form_item" style="justify-content: flex-start">
        <div class="form_title">透明度</div>
        <div style="margin-left: 15px; width: 320px">
          <a-row>
            <a-col :span="12">
              <a-slider
                v-model:value="operateForm.opacity"
                :min="0"
                :max="1"
                :step="0.01"
              />
            </a-col>
            <a-col :span="4">
              <a-input-number
                v-model:value="operateForm.opacity"
                :min="0"
                :max="1"
                :step="0.01"
                style="width: 150px; margin-left: 10px"
              />
            </a-col>
          </a-row>
        </div>
      </div>
      <div
        class="form_item"
        style="margin: 15px 0; justify-content: flex-start"
      >
        <div class="form_title">开始时间</div>
        <a-input-number
          placeholder="请输入"
          :min="0"
          :max="60"
          :step="0.05"
          style="width: 150px; margin-left: 10px; margin-top: -5px"
          v-model:value="operateForm.config.start"
        />
        <div class="form_title" style="margin-left: 10px">播放时长</div>
        <a-input-number
          placeholder="请输入"
          :min="0"
          :max="60"
          :step="0.05"
          style="width: 150px; margin-left: 10px; margin-top: -5px"
          v-model:value="operateForm.config.length"
        />
      </div>
      <div
        class="form_item"
        style="margin: 15px 0; justify-content: flex-start"
      >
        <div class="form_title">过度效果</div>
        <a-button
          @click="chooseTransition()"
          style="width: 150px; margin-left: 10px"
          >选择</a-button
        >
        <div class="form_title" style="margin-left: 10px">字体特效</div>
        <a-button
          @click="chooseSpecial()"
          style="width: 150px; margin-left: 10px"
          >选择</a-button
        >
      </div>

      <div
        class="form_item"
        style="
          margin: 15px 4px;
          justify-content: flex-start;
          font-size: 12px;
          color: #2878FF;
          height: 23px;
        "
      >
        <span
          style="margin-right: 10px; flex-shrink: 0"
          v-if="operateForm.config?.transition_in"
          >淡入：{{
            matchData.transitions[operateForm.config.transition_in]
          }};</span
        >
        <span
          style="margin-right: 10px; flex-shrink: 0"
          v-if="operateForm.config?.transition_out"
          >淡出：{{
            matchData.transitions?.[operateForm.config?.transition_out]
          }};</span
        >
        <span v-if="operateForm.config?.effect"
          >特效：{{ matchData.effects?.[operateForm.config?.effect] }};</span
        >
      </div>
    </div>

    <template #footer>
      <div style="text-align: right">
        <a-space>
          <a-button type="default" @click="handleClose">取消</a-button>
          <a-button type="primary" @click="handleOk">确认</a-button>
        </a-space>
      </div>
    </template>

    <transitionEffect
      @close="closeTansition"
      :visible="transitionVisible"
      :transitionKey="currentTransitionKey"
    />
    <specialEffects
      @close="closeSpecial"
      :visible="specialVisible"
      :specialKey="currentSpecialKey"
    />
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  createVNode,
  ref,
  nextTick,
} from "vue";
import { message } from "ant-design-vue";
import ColorPicker from "colorpicker-v3";
import "colorpicker-v3/style.css";
import {
  AlignLeftOutlined,
  AlignRightOutlined,
  AlignCenterOutlined,
  BorderBottomOutlined,
  BorderTopOutlined,
  BorderVerticleOutlined,
} from "@ant-design/icons-vue";
import transitionEffect from "./modules/transitionEffect.vue";
import specialEffects from "./modules/specialEffects.vue";
import matchData from "./modules/match_data";
import request from "@/common/utils/request";

function getFontList() {
  return request.get("/work_ai", "/user/shotstack/material/fonts/list");
}

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => {},
    },
    scriptId: {
      type: String,
      default: "",
    },
  },

  components: {
    ColorPicker,
    AlignLeftOutlined,
    AlignRightOutlined,
    AlignCenterOutlined,
    BorderBottomOutlined,
    BorderTopOutlined,
    BorderVerticleOutlined,
    transitionEffect,
    specialEffects,
  },

  setup(props, context) {
    const state = reactive({
      currentSpecialKey: "",
      currentTransitionKey: { in: "", out: "" },
      specialVisible: false,
      transitionVisible: false,
      operateForm: {
        font_family: null,
        font_size: 32,
        material_url: null,
        color: "#FFF000",
        backgroundColor: "",
        opacity: 1,
        align_type: "center",
        verticle_position: "center",
        config: {
          start: 0,
          length: 5,
          x: 0,
          y: 0,
          transition_in: "",
          transition_out: "",
          effect: "",
          position: "center",
        },
      },
      alignType: [
        {
          icon: "AlignLeftOutlined",
          name: "左",
          value: "left",
        },
        {
          icon: "AlignCenterOutlined",
          name: "居中",
          value: "center",
        },
        {
          icon: "AlignRightOutlined",
          name: "右",
          value: "right",
        },
      ],
      verticleType: [
        {
          icon: "BorderTopOutlined",
          name: "上",
          value: "top",
        },
        {
          icon: "BorderVerticleOutlined",
          name: "居中",
          value: "center",
        },
        {
          icon: "BorderBottomOutlined",
          name: "下",
          value: "right",
        },
      ],
      typefaceOptions: [],
      fontsizeOptions: [
        {
          label: "12",
          value: 12,
        },
        {
          label: "14",
          value: 14,
        },
        {
          label: "18",
          value: 18,
        },
        {
          label: "24",
          value: 24,
        },
        {
          label: "32",
          value: 32,
        },
        {
          label: "36",
          value: 36,
        },
        {
          label: "44",
          value: 44,
        },
        {
          label: "48",
          value: 48,
        },
        {
          label: "64",
          value: 64,
        },
        {
          label: "80",
          value: 80,
        },
      ],
    });
    const handleOk = () => {
      context.emit("change", {
        html: "<p></p>", // 必须
        font: state.operateForm.font_family,
        font_size: state.operateForm.font_size,
        material_url: state.operateForm.material_url,
        css: `b {font-family: '${
          state.operateForm.font_family
        }','HappyZcool-2016';font-size:${state.operateForm.font_size};color: ${
          state.operateForm.color
        };background: ${
          state.operateForm.backgroundColor
            ? state.operateForm.backgroundColor
            : "transparent"
        };opacity: ${state.operateForm.opacity};text-align: ${
          state.operateForm.align_type
        };}`,
        position: "center",
        opacity: state.operateForm.opacity,
        color: state.operateForm.color,
        background: state.operateForm.backgroundColor,
        align_type: state.operateForm.align_type,
        verticle_position: state.operateForm.verticle_position,
        width: 400,
        height: 50,
        config: {
          x: 0,
          y: 0,
          transition_in: state.operateForm.config?.transition_in,
          transition_out: state.operateForm.config?.transition_out,
          effect: state.operateForm.config.effect,
          position: "center",
          start: state.operateForm.config.start,
          length: state.operateForm.config.length,
        },
      });
      message.success("设置成功！");
    };

    const chooseTransition = () => {
      state.currentTransitionKey = Object.assign(
        {},
        {
          in: state.operateForm.config.transition_in,
          out: state.operateForm.config.transition_out,
        }
      );
      state.transitionVisible = true;
    };

    const closeTansition = (key) => {
      console.log(key);
      if (key != "close") {
        state.operateForm.config.transition_in = key?.in;
        state.operateForm.config.transition_out = key?.out;
      }
      state.transitionVisible = false;
      state.currentTransitionKey = { in: "", out: "" };
    };

    const chooseSpecial = () => {
      state.currentSpecialKey = state.operateForm.config.effect;
      state.specialVisible = true;
    };

    const closeSpecial = (key) => {
      if (key != "close") {
        state.operateForm.config.effect = key;
      }
      state.specialVisible = false;
      state.currentSpecialKey = "";
    };

    const handleClose = () => {
      context.emit("close");
    };

    const handleSelectChange = (value) => {
      let font_family = state.typefaceOptions.find(
        (item) => item.material_url == value
      )?.font_family;
      state.operateForm.font_family = font_family;
    };

    const getFontClass = () => {
      state.typefaceOptions = [];
      getFontList()
        .then((res) => {
          res.result.map((item) => {
            item.label = item.name;
            item.value = item.material_url;
            state.typefaceOptions.push(item);
          });
          if (!state.operateForm.material_url) {
            state.operateForm.material_url = state.typefaceOptions.find(
              (item) => item.label == "站酷快乐体"
            ).material_url;
            state.operateForm.font_family = state.typefaceOptions.find(
              (item) => item.label == "站酷快乐体"
            ).font_family;
          }

          if (props?.scriptId) {
            Object.assign(state.operateForm, {
              html: props.data?.html,
              font_family: props.data?.font,
              font_size: props.data?.font_size,
              css: props.data?.css,
              position: props.data?.position,
              opacity: props.data?.opacity,
              color: props.data?.color,
              backgroundColor: "#fff",
              align_type: props.data?.align_type,
              verticle_position: props.data.verticle_position,
              width: props.data?.width,
              height: props.data?.height,
              config: { ...(props.data.config || {}) },
            });
          }
        })
        .catch(() => {});
    };

    const chooseAlignType = (value, index) => {
      state.operateForm["align_type"] = value;
    };

    const chooseVerticleType = (value, index) => {
      state.operateForm["verticle_position"] = value;
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          if (!props?.scriptId) {
            state.operateForm.backgroundColor = "#fff";
            nextTick(() => {
              state.operateForm.backgroundColor = "";
            });
          }
          getFontClass();
        }
      }
    );

    return {
      ...toRefs(state),
      handleOk,
      handleClose,
      handleSelectChange,
      chooseAlignType,
      chooseVerticleType,
      chooseTransition,
      chooseSpecial,
      closeTansition,
      closeSpecial,
      matchData,
    };
  },
});
</script>

<style lang="less" scoped>
.form_con {
  .form_item {
    display: flex;
    align-items: center;
    margin-top: 10px;

    .form_title {
      width: 60px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .align_type {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .type_item {
        margin-left: 20px;
        font-size: 20px;
        cursor: pointer;

        &.active {
          color: #2878FF;
        }

        &:hover {
          color: #2878FF;
        }
      }
    }
  }
}

.random_title {
  display: flex;
  align-items: center;
}

.signature_con {
  display: flex;
  align-items: center;

  .signature_item {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    margin-left: 5px;

    &:nth-child(1) {
      margin-left: 20px;
    }

    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
</style>
